<template>
  <div class="dashboard-container">
    <el-row style="margin-top:10px;">
      <el-card class="box-card">
        <div slot="header">
          <el-button type="primary" size="small" plain title="发布所有已确认的招聘信息" @click="publish()">全部发布</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            title="爬取岑溪人家和岑溪家园的招聘信息"
            @click="spider()"
          >载入网络爬虫数据</el-button>
          <el-button type="primary" size="small" plain disabled title="导入微信HTML页面的招聘信息">导入本地文件数据</el-button>
          <el-button type="primary" size="small" plain disabled title="跳转到“新建招聘页面”">新建原创招聘</el-button>
          <router-link :to="'/job/edit/'" class="link-type">
            <el-button type="primary" size="small" plain disabled title="跳转到“新建招聘页面”">新建政府机构招聘</el-button>
          </router-link>
        </div>
        <el-form ref="majorForm" :model="majorForm" label-width="80px" size="small">
          <el-form-item label="查询日期">
            <el-date-picker
              size="small"
              v-model="searchDate"
              type="date"
              placeholder="选择查询日期"
              style="width:150px;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="招聘类型">
            <el-checkbox-group v-model="majorForm.type">
              <el-checkbox-button label="SPIDER">网络爬虫数据</el-checkbox-button>
              <el-checkbox-button label="LOCAL_FILE" disabled>本地文件数据</el-checkbox-button>
              <el-checkbox-button label="ORIGINAL" disabled>原创招聘数据</el-checkbox-button>
              <el-checkbox-button label="GOVERNMENT" disabled>政府机构招聘数据</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="招聘状态" style="margin-bottom:2px;">
            <el-checkbox-group v-model="majorForm.status">
              <el-checkbox label="INIT">初始化</el-checkbox>
              <el-checkbox label="IGNORE">已忽略</el-checkbox>
              <el-checkbox label="CONFORM">已确认</el-checkbox>
              <el-checkbox label="PUBLISH">已发布</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div style="padding-left:80px;">
            <el-button
              type="primary"
              round
              size="small"
              icon="el-icon-search"
              style="margin-left:15px;"
              @click="getJobList()"
            >查询</el-button>
          </div>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-card class="box-card">
        <el-table :data="jobList" border stripe style="width:100%;" :loading="jobTableLoading">
          <el-table-column fixed="left" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  icon="el-icon-circle-close"
                  size="mini"
                  title="忽略"
                  @click="operation('IGNORE',scope.row)"
                ></el-button>
                <el-button
                  icon="el-icon-circle-check"
                  size="mini"
                  title="确认"
                  @click="operation('CONFIRM',scope.row)"
                ></el-button>
                <router-link :to="'/job/edit/' + scope.row.oid">
                  <el-button icon="el-icon-edit-outline" size="mini" title="编辑"></el-button>
                </router-link>
              </el-button-group>
            </template>
          </el-table-column>
          <el-table-column label="标题-正文" prop="title">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini">{{scope.row.oid}}</el-tag>
              <a target="_blank" class="link-type" :href="scope.row.link"><strong>{{scope.row.title}}</strong></a>
              <p>{{scope.row.text}}</p>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" prop="status" align="center">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :style="{'background-color': STATUS_MAP[scope.row.status].color,color: '#fff'}"
                disable-transitions
              >{{STATUS_MAP[scope.row.status].text}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="100" prop="type" align="center">
            <template slot-scope="scope">
              <el-tag size="mini" disable-transitions>{{TYPE_MAP[scope.row.type]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="作者" width="120" prop="author">
            <template slot-scope="scope">
              <el-tag size="mini" type="info" disable-transitions>{{scope.row.author}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="100" prop="createTime" align="center">
            <template slot-scope="scope">
              <div style="font-size:12px;">{{scope.row.createTime | momentFormat('YYYY-MM-DD')}}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { SIGPIPE } from "constants";
import request from "@/utils/request";
import axios from "axios";

const axiosForm = axios.create({
  timeout: 1000 * 60 * 8, // request timeout
  headers: {
    "Content-Type": "application/json"
  }
});

export default {
  name: "Dashboard",
  data() {
    return {
      searchDate: new Date(),
      majorForm: {
        type: ["SPIDER"],
        status: ["INIT"]
      },
      jobList: [],
      jobTableLoading: false,
      TYPE_MAP: {
        SPIDER: "网络爬虫",
        LOCAL_FILE: "本地文件",
        ORIGINAL: "原创招聘",
        GOVERNMENT: "政府招聘信息"
      },
      STATUS_MAP: {
        INIT: {
          text: "初始化",
          color: "#3A71A8"
        },
        IGNORE: {
          text: "已忽略",
          color: "#909399"
        },
        CONFIRM: {
          text: "已确认",
          color: "#4AB7BD"
        },
        PUBLISH: {
          text: "已发布",
          color: "#67C23A"
        }
      }
    };
  },
  created() {
    this.getJobList();
  },
  methods: {
    // 查询招聘列表
    async getJobList() {
      let self = this;
      self.jobTableLoading = true;

      const resp = await axiosForm.get("http://127.0.0.1:7001", {
        params: {
          status: self.majorForm.status,
          type: self.majorForm.type,
          searchDate: new Date(this.searchDate).getTime()
        }
      });
      // console.log(resp);
      self.jobList = resp.data.jobList;
      self.jobTableLoading = false;
    },
    // 发布已确认的招聘信息
    publish() {
      this.$confirm("确认发布所有‘已确认’的招聘信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axiosForm
          .post("http://127.0.0.1:7001/job/publish")
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功！"
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "操作失败！"
            });
          });
      });
    },
    // 爬取招聘信息
    spider() {
      this.$confirm("确认抓取招聘信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 爬取岑溪人家的招聘数据
        axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxrj");

        // 爬取岑溪家园的招聘数据
        axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxjy");

        this.$message({
          type: "success",
          message: "已执行爬虫作业！"
        });
      });
    },
    // 操作栏
    operation(type, data) {
      if (type === "IGNORE") {
        this.$confirm("确认忽略该招聘信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          axiosForm
            .post("http://127.0.0.1:7001/job/ignore", {
              oid: data.oid
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功！"
              });
              this.getJobList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败！"
              });
            });
        });
      } else if (type === "CONFIRM") {
        this.$confirm("将该招聘设置为‘已确认’？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          axiosForm
            .post("http://127.0.0.1:7001/job/confirm", {
              oid: data.oid
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功！"
              });
              this.getJobList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败！"
              });
            });
        });
      } else if (type === "EDIT") {
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f0f2f5;
  padding: 10px 20px 20px 20px;
  min-height: calc(100vh - 84px);
  font-size: 12px;
}

form label.el-form-item__label {
  font-weight: normal !important;
}

.dashboard {
  &-container {
    // background-color: #f0f2f5;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.link-type {
  color: #337ab7;
  cursor: pointer;
}
</style>
